<template>
      <!--显示和发表帖子评论、评论的评论-->
      <div class='comment'>
      <!--帖子评论排序按钮-->
      <div class="van-row--flex van-row--justify-center">
        <van-button @click="sortkind='Date';comments=sortcomments(comments)"
                    plain hairline icon="descending"
                    type="primary" size="small" style="margin-left: 190px">时间
        </van-button>
        <van-button @click="sortkind='heat';comments=sortcomments(comments)"
                    plain hairline icon="descending"
                    type="primary" size="small" style="margin-left: 2px">热度
        </van-button>
      </div>
      <!-- 帖子评论-->
      <van-list name="comment-list" tag="div">
        <div v-for="(comment, index) in visibleComments"
             :key="index" ref="commentRef" :id="`comment-${comment.pcommentID}`">
          <div class="van-hairline--top-bottom"
               :style="{ 'background-color': isNightStyle ? 'rgb(50,50,50)' : 'white',
          'color': isNightStyle ? 'gray' : null }">
            <!-- 显示评论详情-->
            <div style="margin-bottom: 0.5px;margin-left: 20px;">
              <!--              评论头像-->
              <div class="van-col">
                <van-image :src="comment.authorAvatar"
                           width="30"
                           height="30"
                           round style="margin-right: 20px"></van-image>
              </div>
              <!--        评论作者和评论内容-->
              <div class="van-row" style="margin-top: 20px">
                <div class="van-row">
                  <div class="van-col comment-author-name" style="margin-top:5px;margin-left: -15px;
                font-size:13px;">{{ comment.author }}
                  </div>
                  <div class="van-col" style="margin-top: 11px;margin-left: 7px;font-size:11px;">
                    <van-tag v-if="comment.authorIdentity==='teacher'" color="#7232dd" plain>
                      教师
                    </van-tag>
                    <van-tag :color="getTagColor(comment.authorTitle)">
                      {{ comment.authorTitle }}
                    </van-tag>
                  </div>
                </div>
                <div class="comment-content" style="margin-top:20px;">
                  {{ comment.content }}
                </div>
                <div>
                  <div class="post_content" style="color:rgb(128,128,128);">
                    {{ formatDate(comment.commentTime) }}
                  </div>
                </div>
                <!--显示每个评论的点赞和回复数，点赞和回复图片对应点赞和回复功能-->
                <div class='van-row--flex justify-content-between align-items-center'>
                  <div class="text-muted">
                    <van-icon size="20px" :name="comment.isLiked ? 'good-job' : 'good-job-o'"
                              :color="comment.isLiked ? '#ee0a24' : ''"
                              @click.stop="pclike(index)"
                              :class="{ 'text-danger': comment.isLiked }">
                    </van-icon>
                    <span style="font-size: 14px;vertical-align: 1.2px;margin: 0.8px;">
                      {{ comment.likeNum }}</span>
                  </div>
                  <van-icon size="20px" name="comment-o"
                            style="vertical-align: middle; margin-top: 13px;
                            margin-left: 30px;"
                            @click.stop="comment.showReplyForm
            = !comment.showReplyForm">
                  </van-icon>
                  <div class='text-muted' @click.stop>
                    <van-icon size="20px" name='ellipsis'
                              @click.stop="comment.showMenu =
              !comment.showMenu" style="margin-left: 33px;margin-top: 1px;"></van-icon>
                  </div>
                </div>
                <!--对帖子评论的更多功能选择菜单：举报和删除-->
                <van-popup
                    v-model='comment.showMenu'
                    position="bottom"
                    round
                    :style="{height:'10%'}"
                    @click.stop
                >
                  <!--                  举报评论按钮-->
                  <div class="van-row--flex"
                       v-if='comment.authorTelephone !== userInfo.phone'
                       @click.stop='showReportModal = true'
                       @keydown="handleKeyboardEvent"
                  >
                    <van-icon name="failure" class='mr-2' style="font-size:25px;
                    margin-left: 10px;margin-top: 30px;">
                    </van-icon>
                    <span style="font-size:20px;
                    margin-left: 8px;margin-top: 29px;">举报</span>
                  </div>
                  <!--                  提交举报弹窗-->
                  <van-dialog v-model='showReportModal'
                              title='举报'
                              @confirm='submitReport("pcomment",comment.pcommentID)'
                              @cancel='clearReportReason'
                              @hidden='clearReportReason'
                              confirm-button-text="提交"
                              show-cancel-button>
                    <van-field v-model='reportReason'
                               type="textarea" placeholder='请输入举报原因' rows='8'>
                    </van-field>
                  </van-dialog>
                  <!--                  删除评论按钮-->
                  <div
                      v-if='comment.authorTelephone === userInfo.phone'
                      @click.stop='showDeleteModal = true'
                      @keydown.stop="handleKeyboardEvent"
                  >
                    <van-icon size="20px" name="delete-o" class='mr-2'></van-icon>
                    <span style="font-size:20px;margin-left: 5px;">删除</span>
                  </div>
                  <!--              确认删除弹窗    -->
                  <van-dialog
                      v-model='showDeleteModal'
                      show-cancel-button
                      @confirm='pcommentdelete(comment)'
                  >
                    <p>你确定要删除这条评论吗？</p>
                  </van-dialog>
                </van-popup>
                <!--如果点击了评论，将显示评论窗口-->
                <van-popup
                    round
                    position="bottom" :style="{ height: '50%' }"
                    v-model="comment.showReplyForm">
                  <van-form @submit="ccommentPost(index)">
                    <van-field v-model="ccomment.content"
                               rows="3"
                               maxlength="100"
                               show-word-limit
                               autosize
                               type="textarea"
                               placeholder="请写下你的精彩评论...">
                    </van-field>
                    <!--                    表情选择器和提交评论按钮-->
                    <div>
                      <!-- <van-button style="margin-right: 2px"
                                  type="default" native-type="button"
                                  plain size="small"
                                  @click="showEmojiStatus()">😀
                      </van-button> -->
                      <div v-if="showEmoji">
                        <picker
                            :include="['people']"
                            :showSearch="false"
                            :showPreview="false"
                            :showCategories="false"
                            @select="addEmojiToCcomment"
                            style="height: 100px"
                        />
                      </div>
                      <van-button type="primary"
                                  plain native-type="submit" :loading="buttonLoading">
                        提交评论
                      </van-button>
                    </div>
                  </van-form>
                </van-popup>
              </div>
            </div>
            <!-- 查看回复列表按钮-->
            <van-button v-if="comment.subComments.length > 0"
                        @click="showRepliesModal=true;showcommentsindex=index"
                        size="small"
                        type="default"
                        plain>
              查看回复共{{ len(comment.subComments) }}条
            </van-button>
          </div>
        </div>
      </van-list>
      <!-- 评论的评论（下弹窗） -->
      <van-popup
          position="bottom"
          round
          :style="{ height: '80%' }"
          v-model="showRepliesModal">
        <!--显示评论的评论/回复列表-->
        <van-list name="comment-list">
          <div v-for="(subComment, subIndex) in visibleSubComments(showcommentsindex)"
               :key="subIndex" :id="`ccomment-${subComment.ccommentID}`" tabindex="0">
            <!--   用线来间隔-->
            <hr>
            <div class="van-row">
              <!-- 头像-->
              <div class="van-col" style="margin-right: 5px">
                <van-image width="30"
                           height="30" round class="mr-3"
                           :src="subComment.authorAvatar"></van-image>
              </div>
              <!-- 作者名称和回复内容、时间&点赞、举报和回复图标-->
              <div class="van-row">
                <!--作者名称和回复内容-->
                <div class="van-row">
                  <van-row>
                    <div class="van-col comment-author-name" style="margin-top: 6px;
                  margin-left: 4px; font-size: 13px;">{{ subComment.author }}
                    </div>
                    <van-col style="margin-top: -8px;margin-left: 5px;">
                      <van-tag v-if="subComment.authorIdentity==='teacher'" color="#7232dd" plain>
                        教师
                      </van-tag>
                      <van-tag
                          :color="getTagColor(subComment.authorTitle)">{{ subComment.authorTitle }}
                      </van-tag>
                    </van-col>
                  </van-row>
                  <div
                      class="van-row--flex"
                      v-if="subComment.userTargetName !== ''">
                            <span
                                class="comment-content"
                                style="color: cadetblue;font-size: 13px;margin-left: 10px;">
                              回复@{{ subComment.userTargetName }}:</span>
                  </div>
                  <div
                      class="comment-content" style="font-size: 13px; margin-left: 10px;">
                    {{ subComment.content }}
                  </div>
                </div>
                <!--回复时间&点赞、举报和回复图标-->
                <div class="van-row--flex">
                  <!--回复时间-->
                  <div></div>
                  <div class="text-muted" style="font-size: 10px; margin-left: 10px;">
                    {{ formatDate(subComment.commentTime) }}
                  </div>
                  <!--点赞图标-->
                  <div class="text-muted">
                    <van-icon style="font-size: 16px;margin-left: 60px;"
                              :name="subComment.isLiked ? 'good-job' : 'good-job-o'"
                              :color="subComment.isLiked ? '#ee0a24' : ''"
                              @click.stop="cclike(showcommentsindex,subIndex)"
                              :class="{ 'text-danger': subComment.isLiked }">
                    </van-icon>
                    <span style="font-size: 10px;margin-left: -1px;">
                      {{ subComment.likeNum }}</span>
                  </div>
                  <!--举报/删除图标-->
                  <div class='text-muted'>
                    <!--举报图标-->
                    <div v-if="subComment.authorTelephone !== userInfo.phone">
                      <van-icon style="font-size: 16px;margin-left: 10px;" name='failure'
                                @click.stop='showReportModal = true'></van-icon>
                      <van-dialog v-model='showReportModal'
                                  title='举报'
                                  @confirm='submitReport("ccomment",subComment.ccommentID)'
                                  @cancel='clearReportReason'
                                  @hidden='clearReportReason'
                                  confirm-button-text="提交"
                                  show-cancel-button>
                        <van-field autosize type="textarea"
                            v-model='reportReason' placeholder='请输入举报原因' rows='8'>
                        </van-field>
                      </van-dialog>
                    </div>
                    <!--删除图标-->
                    <div v-else>
                      <van-icon style="font-size: 16px;margin-left: 10px;"
                                name='delete-o' @click.stop='showDeleteModal = true'></van-icon>
                      <van-dialog
                          v-model='showDeleteModal'
                          confirm-button-text='确认'
                          show-cancel-button
                          @confirm='ccommentdelete(subComment)'
                      >
                        <p>你确定要删除这条评论吗？</p>
                      </van-dialog>
                    </div>
                  </div>
                  <!--回复按钮，点击后跳出评论的评论的回复窗口-->
                  <div class="text-muted">
                    <van-icon style="font-size: 16px;margin-left: 10px;margin-top: 2px;"
                              name="comment-o"
                              @click="replyshow = !replyshow; nowReplyComment=subComment">
                      <span style="font-size: 10px;margin-left:5px;vertical-align: 3px;">回复</span>
                    </van-icon>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </van-list>
        <!-- 弹出评论回复窗口-->
        <van-popup position="bottom" round
                   :style="{height:'50%'}"
                   v-model="replyshow">
          <van-form @submit=
                        "ccommentPost(showcommentsindex,
                          nowReplyComment.author,
                          nowReplyComment.ccommentID)">
            <van-field v-model="ccomment.content"
                       rows="2"
                       autosize
                       maxlength="100"
                       show-word-limit
                       type="textarea"
                       id="ccommentInput"
                       :placeholder="'回复@'+nowReplyComment.author">
            </van-field>
            <!--表情选择器-->
            <div>
              <!-- <van-button style="margin-right: 2px"
                          type='primary' size="small" plain
                          native-type="button"
                          @click="showEmojiStatus()">😀
              </van-button> -->
              <div v-if="showEmoji">
                <picker
                    :include="['people']"
                    :showSearch="false"
                    :showPreview="false"
                    :showCategories="false"
                    @select="addEmojiToCcomment"
                />
              </div>
              <van-button type="primary" plain native-type="submit" :loading="buttonLoading">
                提交回复
              </van-button>
            </div>
          </van-form>
        </van-popup>
      </van-popup>
      <!--加载更多帖子评论-->
      <van-button v-if="visibleComments.length < comments.length" @click="showAllComments()">
        {{ allComments ? '折叠评论' : '展开全部评论' }}
      </van-button>
    </div>
</template>
<script>

</script>
